<template>
  <div class="component">
    <div class="all">
      <div class="header">
        <header-title></header-title>
      </div>
      <div class="main-box">
        <keep-alive>
          <router-view :home="home" ref="child"></router-view>
        </keep-alive>
      </div>
      <div class="moudle-box">
        <dv-border-box-12>
          <div class="utils-flex-Justbetween" style="box-sizing: border-box;padding: 15px;height: 100%;">
            <div class="moudle-aside">
              <el-menu default-active="2" :default-openeds="['0']" class="el-menu-vertical-demo"
                background-color="#ffffff99" text-color="#19389f" active-text-color="#ffd04b">
                <el-submenu v-for="item in tier" index="0">
                  <template slot="title">

                    <el-radio v-model="tierName" :label="item.name" @change="radioChange(item)">{{ item.cname }}
                    </el-radio>
                  </template>
                  <el-submenu v-for="item2 in item.children" index="0">
                    <template slot="title">
                      <i class="el-icon-location"></i>
                      <el-radio v-model="tierName" :label="item2.name" @change="radioChange(item2)">{{ item2.cname }}
                      </el-radio>
                    </template>
                    <el-submenu v-for="item3 in item2.children" index="0">
                      <template slot="title">
                        <i class="el-icon-location"></i>
                        <el-radio v-model="tierName" :label="item3.name" @change="radioChange(item3)">{{ item3.cname }}
                        </el-radio>
                      </template>
                      <el-menu-item v-for="item4 in item3.children" index="0">
                        <template slot="title">

                          <el-radio v-model="tierName" :label="item4.name" @change="radioChange(item4)">
                            {{ item4.cname }}</el-radio>
                        </template>
                      </el-menu-item>
                    </el-submenu>
                  </el-submenu>
                </el-submenu>
              </el-menu>
            </div>
            <div class="moudle-bottom" >
              <div class="bottom-pos utils-flex-Justaround">
                <div class="bottom-item utils-after-bg">
                  <div class="text">
                    <template v-if="templateBoxData">
                      <template-box :type="templateBoxData[0].type"
                        :config="templateBoxData[0].dataSource.data"></template-box>
                    </template>
                  </div>
                </div>
                <div class="bottom-item utils-after-bg">
                  <div class="text">
                    <template v-if="templateBoxData">
                      <template-box :type="templateBoxData[1].type"
                        :config="templateBoxData[1].dataSource.data"></template-box>
                    </template>
                  </div>
                </div>
                <div class="bottom-item utils-after-bg">
                  <template v-if="templateBoxData">
                    <div class="text" style="height: 100%;">
                      <template-box :type="templateBoxData[2].type"
                        :config="templateBoxData[2].dataSource.data"></template-box>
                    </div>
                  </template>
                </div>
              </div>
            </div>
            <div class="moudule-right">
              <div class="right-pos utils-flex-dir utils-flex-Justbetween">
                <div class="topAll">
                  <transition name="breadcrumb">
                    <component :is="panel" @getVideo="getVideo" @removeVideo="removeVideo"  ref="panels"></component>
                  </transition>
                </div>
                <!--                <div class="right-item utils-after-bg">
                  <video id="home_video" :src="videoSrc" autoplay controls loop muted style="width: 100%;height: 100%;object-fit: cover;position: relative;z-index: 99999;" />
                </div> -->
              </div>
            </div>
          </div>
        </dv-border-box-12>
      </div>
    </div>
    <loading :percent="percent" ref="loading"></loading>
    <el-dialog title="mqtt配置" :visible.sync="mqttForm.visible" :width="mqttForm.width" :close-on-press-escape="false"
      :close-on-click-modal="false">
      <el-form :model="mqttForm">
        <el-form-item label="ip/端口">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input v-model="mqttForm.ip" clearable></el-input>
            </el-col>
            <el-col :span="6">
              <el-input v-model="mqttForm.port" clearable></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="服务器地址">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input v-model="mqttForm.base_url" clearable></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="摄像头地址">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input v-model="mqttForm.video_url" clearable></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="身份">
          <el-radio-group v-model="mqttForm.status">
            <el-radio label="alone">独立端</el-radio>
            <el-radio label="pub">控制端</el-radio>
            <el-radio label="sub">被控制端</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="mqttInit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import headerTitle from '@/components/header/index.vue';
  import dialogForm from '@/components/form/index';
  import weather from '@/components/weather';
  import Hls from 'hls.js';
  import indexPanel from '@/components/panels/index.vue'; // 默认
  import lampPanel from '@/components/panels/lampPanel/index.vue'; // 台灯控制
  import conditionerPanel from '@/components/panels/conditionerPanel/index.vue'; // 空调控制
  import screenPanel from '@/components/panels/screenPanel/index.vue'; // 屏幕控制
  import cameraPanel from '@/components/panels/cameraPanel/index.vue'; // 监控控制
  import { mapState } from 'vuex';
  // import mqtt from 'mqtt'; // mqtt连接
  // import { MQTT_HOST, options } from '@/assets/config/mqtt/root.js'; // mqtt配置
  // import srollBoard from '@/components/item/templateBox/srollBoard/index.vue'; // 滚动列表 下二
  import { config } from '@/assets/config/config.js'; // 测试json数据
  import templateBox from '@/components/item/templateBox/templateBox.vue';
  import { MqttUtil } from '@/utils/MqttUtil.js';

  export default {
    components: {
      headerTitle,
      dialogForm,
      weather,
      indexPanel,
      lampPanel,
      conditionerPanel,
      screenPanel,
      cameraPanel,
      templateBox
    },
    data() {
      return {
        home: this,
        percent: 0,
        config,
        moudle_box: {
          moudle_bottom: true
          // moudle_bottom: !(navigator.userAgent.toLowerCase().match(
          //     /(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) !=
          //   null)
        },
        panel: 'screenPanel',
        bottomData: {
          first: {
            other: {
              title: '人工智能应用技术创新中心',
              content: '由张浩淼，佘明洪，张春阳等教师带领，紧密结合科学发展前沿和国家重大需要，瞄准工业智能化、建筑智能化发展需求，产学研用融合，结合校企合作的实践培养方法，聚集起的一支“知行合一、务实创新”的优秀团队。主要从事人工智能的应用研究，包括计算机科学、机器学习、人机交互、认知科学等以及与人工智能有关的应用技术与系统的研究，现开发系统有Gscloud发电机组云控平台、国家NCSS调查问卷平台、智能楼宇可视化管理系统、智能网联汽车系统等。主要成果：企业科研项目4项，省部级课题研究5项，申报大学生创新项目5项，发表学术论文4篇，专利授权2项，国家软件著作2项，获国家奖项3项、省级奖项25项其金奖7项等。'
            }
          }
        },
        config2: {
          data: [23],
          shape: 'roundRect'
        },
        tier: [{
          name: 'torch',
          cname: '火炬二小',
          path: 'torch',
          children: [{
              name: 'jxl',
              cname: '教学楼',
              path: 'jxl'
              // children: [
              //   {
              //     name: 'jxl_floor1',
              //     cname: '教学楼1楼',
              //     path: 'jxl_floor1',
              //     children: []
              //   },
              //   {
              //     name: 'jxl_floor2',
              //     cname: '教学楼2楼',
              //     path: 'jxl_floor2',
              //     children: []
              //   },
              //   {
              //     name: 'jxl_floor34',
              //     cname: '教学楼3楼',
              //     path: 'jxl_floor34',
              //     children: []
              //   },
              //   {
              //     name: 'jxl_floor34',
              //     cname: '教学楼4楼',
              //     path: 'jxl_floor34',
              //     children: []
              //   },
              //   {
              //     name: 'jxl_floor5',
              //     cname: '教学楼5楼',
              //     path: 'jxl_floor5',
              //     children: []
              //   }
              // ]
            },
            {
              name: 'zhl',
              cname: '综合楼',
              path: 'zhl'
              // children: [
              //   {
              //     name: 'zhl_floor1',
              //     cname: '综合楼1楼',
              //     path: 'zhl_floor1',
              //     children: []
              //   }, {
              //     name: 'zhl_floor2',
              //     cname: '综合楼2楼',
              //     path: 'zhl_floor2',
              //     children: []
              //   }, {
              //     name: 'zhl_floor3',
              //     cname: '综合楼3楼',
              //     path: 'zhl_floor3',
              //     children: []
              //   }
              // ]
            },
            {
              name: 'yry',
              cname: '幼儿园',
              path: 'yry'
              // children: [
              //   {
              //     name: 'yry_floor1',
              //     cname: '幼儿园1楼',
              //     path: 'yry_floor1',
              //     children: []
              //   }, {
              //     name: 'yry_floor2',
              //     cname: '幼儿园2楼',
              //     path: 'yry_floor2',
              //     children: []
              //   }, {
              //     name: 'yry_floor3',
              //     cname: '幼儿园3楼',
              //     path: 'yry_floor3',
              //     children: []
              //   }, {
              //     name: 'yry_floor4',
              //     cname: '幼儿园4楼',
              //     path: 'yry_floor4',
              //     children: []
              //   }
              // ]
            },
            {
              name: 'tsjs_a301',
              cname: '特色教室',
              path: 'tsjs_a301',
              children: [{
                  name: 'tsjs_a301',
                  cname: 'A301传统书法教室',
                  path: 'tsjs_a301'
                },
                {
                  name: 'tsjs_a303',
                  cname: 'A303数字书法教室',
                  path: 'tsjs_a303'
                },
                {
                  name: 'tsjs_zxjf',
                  cname: '中心机房',
                  path: 'tsjs_zxjf'
                },
                {
                  name: 'tsjs_jplbs',
                  cname: '精品录播室',
                  path: 'tsjs_jplbs'
                },
                {
                  name: 'tsjs_hdlbs',
                  cname: '互动录播室1',
                  path: 'tsjs_hdlbs'
                },
                {
                  name: 'tsjs_hdlbs',
                  cname: '互动录播室2',
                  path: 'tsjs_hdlbs'
                },
                {
                  name: 'tsjs_hdlbs',
                  cname: '互动录播室3',
                  path: 'tsjs_hdlbs'
                }
              ]
            }
          ]
        }],
        tierName: this.$route.path.replace('/', ''),
        mqttForm: {
          visible: navigator.userAgent.toLowerCase().match(
            /(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null,
          ip: '10.145.12.20',
          port: '1884',
          base_url: localStorage.getItem("base_url") ?? '10.145.12.24',
          video_url: localStorage.getItem("video_url") ?? '10.145.12.24',
          url: '10.145.12.20:1884',
          status: 'alone', // alone独立控制, sub订阅者, pub发布者
          width: navigator.userAgent.toLowerCase().match(
              /(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) !=
            null ? '60%' : '30%'
        },
        videoSrc: 'static/model/video/mp4/torch2020.mp4',
        templateBoxData: null,
        mqtt: null, // 实列化的mqtt类
        queryInfo: {
          usernmae: 'scjzy',
          pwd: '123456'
        }
      };
    },
    created() {
      // this.getTocken()
      this.$eventBus.$on('mqtt_status', () => {
        this.$message.success('请选择设备端');
        this.mqttForm.visible = true;
      });
      this.$store.commit('setMqtt', this.mqttForm);
    },
    mounted() {
      this.getListBox();
      window.addEventListener('keydown', event => {
        if (event.key === 'c' && event.ctrlKey) {
          this.mqttForm.visible = true;
        }
      });
    },
    computed: {
      ...mapState(['panelStatus'])
    },
    watch: {
      $route: {
        handler(val) {
          this.getListBox();
          this.watchPanel(val.path.replace('/', ''));
        },
        immediate: true
      },
      // mqttForm: {
      //   handler(val) {
      //     // this.getListBox();
      //     var ret = () => {
      //       return;
      //     };
      //     if (val.status === 'sub') {
      //       window.addEventListener('click', ret);
      //     } else {
      //       window.removeEventListener('click', ret);
      //     }
      //   },
      //   // immediate: true,
      //   deep: true
      // },
      panelStatus(newlabel, oldlabel) {
        this.panel = newlabel.split('$')[0];
        console.log('改变了');
      },
      tierName(newlabel, oldlabel) {
        console.log(newlabel);
        this.watchPanel(newlabel);
      }
    },
    methods: {
      watchPanel(newlabel) {
        switch (newlabel) {
          case 'torch':
            this.panel = 'screenPanel';
            break;
          case 'tsjs_a301':
          case 'tsjs_a303':
          case 'tsjs_jplbs':
            this.panel = 'cameraPanel';
            break;
          default:
            this.panel = 'screenPanel';
        }
      },
      async getTocken() {
        const res = await this.$api.torch.getTocken(this.queryInfo);
        console.log(res);
      },
      async getListBox() {
        try {
          const res = await this.$api.box.getListBox({ name: this.$route.path.replace('/', '') });
          this.templateBoxData = res.map(item => {
            item.dataSource = JSON.parse(item.dataSource)
            return item
          });
          console.log(this.templateBoxData)
        } catch (err) {
          console.log(err);
        }
      },
      mqttInit() {
        this.mqttForm.visible = false;
        this.mqttForm.url = `${this.mqttForm.ip}:${this.mqttForm.port}`;
        localStorage.setItem("base_url",this.mqttForm.base_url)
        localStorage.setItem("video_url",this.mqttForm.video_url)
        this.$refs.child.mqttInit();
        this.$store.commit('setMqtt', this.mqttForm);
        this.initMqtt();
      },
      initMqtt() {
        if (this.home.mqttForm.status === 'sub') {
          if (this.mqtt) this.mqtt.client.end();
          this.mqtt = new MqttUtil(
          `mqtt://${this.home.mqttForm.url}`, { clientId: `home_${this.home.mqttForm.status}` });
          this.mqtt.setSubTopic('home');
          this.mqtt.subTopic((topic, message) => {
            if (topic === 'home') {
              const { type, data } = JSON.parse(message.toString());
              if (type === 'list') {
                this.$router.push(data.label);
                this.tierName = data.label;
              }
            }
          });
        } else if (this.home.mqttForm.status === 'pub') {
          if (this.mqtt) this.mqtt.client.end();
          this.mqtt = new MqttUtil(
          `mqtt://${this.home.mqttForm.url}`, { clientId: `home_${this.home.mqttForm.status}` });
        } else if (this.home.mqttForm.status === 'alone') {
          if (this.mqtt) this.mqtt.client.end();
        }
        this.$store.commit("setClient",this.mqtt)
        this.$refs.panels?.initMqtt()
      },
      loading() {
        this.$refs.loading.openShow();
      },
      loadProgress(progress) {
        this.percent = progress;
      },
      loadOver() {
        this.$refs.loading.closeShow();

        // this.loadingDom.close()
        this.$message.success('加载完成');
      },
      getVideo(dom) {
        console.log('获取到了dom', dom);
        if (this.$refs.child.openLedVideo) this.$refs.child.openLedVideo(dom);
      },
      removeVideo() {
        if (this.$refs.child.closeLedVideo) this.$refs.child.closeLedVideo();
      },
      /**
       * 导航菜单单选按钮更改事件（将更改传递给子页面场景）
       * @param item
       */
      radioChange(item) {
        // console.log(this.$utils.util.isPhone(), this.mqtt);
        if (this.home.mqttForm.status === 'pub' && this.mqtt) {
          this.mqtt.pubTopic(
            'home',
            JSON.stringify({
              type: 'list',
              data: { label: item.name }
            })
          );
        }
        this.$router.push(item.name);
      },
      /**
       * 子页面新场景更改事件（将新场景名传递给当前页面）
       * @param tierName
       */
      tierChange(tierName) {
        this.tierName = tierName;
      },
      setPanel(panel) {
        // 直接调用更改动态组件
        this.panel = panel;
      },
      /**
       * 改变video框内容（供子页面调用，将数据传递给当前页面）
       * @param src
       * @param option
       */
      videoChange(src, option) {
        const that = this;
        src = src || that.videoSrc;
        option = option || {};
        const type = option.type || 'video';
        const video = this.video;

        if (that.hls) {
          that.hls.destroy();
          that.hls = null;
        }

        if (video.srcObject) {
          video.srcObject.getTracks().forEach(track => track.stop());
          video.srcObject = null;
        }
        if (type === 'video') {
          video.src = src;
        } else if (type === 'hls') {
          if (Hls.isSupported()) {
            that.hls = new Hls(); // 实例化 Hls 对象
            that.hls.loadSource(src);
            that.hls.attachMedia(video);
            that.hls.on(Hls.Events.MANIFEST_PARSED, function() {
              video.play(); // 调用播放 API
            });
          }
        } else if (type === 'camera') {
          if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            const constraints = {
              video: {
                width: 1280,
                height: 720,
                facingMode: 'user'
              }
            };
            navigator.mediaDevices
              .getUserMedia(constraints)
              .then(function(stream) {
                video.srcObject = stream;
                video.play();

                // that.home.videoChange(stream, { type: 'camera'})
              })
              .catch(function(error) {
                console.error('Unable to access the camera/webcam.', error);
              });
          }
        }
      }
    }
  };
</script>

<style lang="less" scoped>
  @after-width: -7px; // 边框距离内容的距离，小边框
  @left-width: 17%; // 左边导航栏宽度
  @middle-width: 60%; // 中间宽度
  @right-width: 22%; // 左边宽度
  @fontSize: 14px; // 基本字体大小
  @fontColor: #2bc7f6; // 基本颜色
  @bgColor: rgba(29, 64, 181, 0); // aside 背景颜色

  @media only screen and (max-width: 1367px) {
    /deep/ .el-submenu__title {
      padding-left: 10px !important;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    /deep/ .el-icon-location {
      display: none;
    }
  }

  .z-index {
    position: absolute;
    z-index: 99;
  }

  .moudle-box {
    pointer-events: none;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    box-sizing: border-box;

    .moudle-aside {
      pointer-events: auto;
      overflow: auto;
      padding: 10px;
      width: @left-width;
      height: 100%;
      box-sizing: border-box;
      // background-color: #102262;
      background-color: rgba(29, 64, 181, 0.3);
      border-radius: 10px;
      position: relative;
    }

    .moudle-bottom {
      width: @middle-width;
      height: 100%;
      position: relative;
      box-sizing: border-box;
      user-select: none;
      box-sizing: border-box;
      margin-right: 10px;

      //pointer-events: auto;
      >.bottom-pos {
        width: 100%;
        height: 27%;
        position: absolute;
        bottom: 0;

        >.bottom-item {
          // height: 200px;
          height: 100%;
          width: 30%;

          // .text:not(:first-child) {
          //   pointer-events: auto;
          // }
          .text {
            pointer-events: auto;
          }

          .text {
            font-size: @fontSize;
            color: @fontColor;
            box-sizing: border-box;
            padding: 5px;
            height: 100%;
            position: relative;
            z-index: 999;

            header {
              text-align: center;
              // background: ;
              height: 10%;
              font-size: 16px;
              margin: 0;
              text-shadow: 0 0 5px #2bc7f6;
            }

            .message {
              font-size: 13px;
              height: 90%;
              margin: 5px 0;
              word-break: break-all;
              text-overflow: ellipsis;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 9;
              -webkit-box-orient: vertical;
            }
          }

          // border: 1px solid red;
        }
      }
    }

    .moudule-right {
      // pointer-events: none;
      position: relative;
      pointer-events: auto;
      width: @right-width;
      height: 100%;

      // &:first-child {
      //   height: 36%;
      // }

      .topAll {
        height: 100%;
      }

      >.right-pos {
        position: absolute;
        z-index: 999;
        right: 5px;
        bottom: 0;
        width: 100%;
        height: 99%;

        // > .right-item {
        //   height: 30%;
        //   width: 100%;
        // }

        >.right-item {
          height: 30%;
          width: 100%;

          .text-right {
            box-sizing: border-box;
            padding: 5px;
            pointer-events: auto;

            .point {
              height: 40px;
              box-sizing: border-box;
              padding-top: 10px;
              font-size: 22px;
              color: #2bc7f6;
              text-align: center;
              text-shadow: 0 0 7px #2bc7f6;
            }
          }

          // border: 1px solid red;
        }
      }
    }
  }

  .component {
    height: 100vh;
    width: 100%;

    .all {
      height: 100%;
      position: relative;

      .header {
        position: fixed;
        top: 0;
        height: 50px;
        background-color: rgba(16, 34, 98, 0.8);
        width: 100%;
        color: #333;
        text-align: center;
        line-height: 60px;

        .header-title {
          transform: translateX(-1%);
          width: 700px;
          height: 80%;
          margin: 0 auto;
          background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(46, 203, 203, 0.5));
          display: flex;
          justify-content: center;
          border: 10px;
          align-items: center;

          .title-text {
            color: #07e3f6;
            text-shadow: 0 0 10px #09bbd2, 0 0 30px #09bbd2, 0 0 50px #09bbd2, 0 0 80px #09bbd2;
            text-align: center;
            font-size: 25px;
          }
        }
      }

      .main-box {
        height: 100vh;
        width: 100%;
      }

      .floor {
        pointer-events: none;
        width: 80%;
        height: 20%;
        position: absolute;
        bottom: 10%;
        left: 25%;

        .gird {
          width: 100%;
          height: 100%;

          .box {
            height: 100%;
            width: 100%;
            background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));

            .title {
              padding-top: 5px;
              margin-left: 10px;
              margin-right: 10px;
              font-weight: bold;
              color: #eaf106;
              line-height: 20px;
              font-size: 15px;
              padding-right: 20px;
              box-sizing: border-box;
              border-bottom: 2px solid #07e3f6;
            }

            .content {
              height: 85%;

              //padding-top: 10px;
              .text-box {
                border-bottom: 2px solid #07e3f6;
                margin-left: 20px;
                margin-right: 10px;

                .l {
                  font-weight: bold;
                  color: #06f1f1;
                  line-height: 20px;
                  font-size: 15px;
                  //padding-right: 20px;
                  text-shadow: 0 0 10px #06f1f1, 0 0 20px #06f1f1;
                }

                .r {
                  float: right;
                  font-weight: bold;
                  color: #4cb356;
                  line-height: 20px;
                  font-size: 15px;
                  //padding-right: 20px;
                  text-shadow: 0 0 10px #4cb356, 0 0 20px #4cb356;
                }
              }

              .graph-box {
                height: 100%;
              }

              .page1 {
                margin-left: 10px;
                color: #06f1f1;
                line-height: 20px;
                text-shadow: 0 0 10px #06f1f1, 0 0 20px #06f1f1;
                font-size: 15px;
              }
            }
          }
        }
      }

      .l-aside {
        //pointer-events: none;
        width: 250px;
        height: 80%;
        position: absolute;
        left: 2px;
        top: 60px;
        background: linear-gradient(rgba(205, 49, 245, 0.3), rgba(46, 203, 203, 0.7));

        .el-menu {
          border: none !important;
          height: 100%;
          background-color: rgba(0, 0, 0, 0) !important;
        }
      }

      .r-aside {
        right: 0;
        height: 80%;
        top: 60px;
        width: 250px;
        position: absolute;
        background: linear-gradient(rgba(205, 49, 245, 0.3), rgba(46, 203, 203, 0.7));

        .upCard {
          height: 45%;
        }

        .downCard {
          height: 45%;
        }

        .el-card {
          height: 100%;
          background-color: rgba(0, 0, 0, 0);
          margin-top: auto;

          .video {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }

  /deep/ .el-menu {
    background-color: rgba(29, 64, 181, 0) !important;
    border: none !important;
  }

  /deep/ .el-menu-vertical-demo {
    border-radius: 20px;
    overflow: hidden;
  }

  /deep/ .el-radio__label {
    opacity: 1;
    color: @fontColor  !important;
  }

  /deep/ .el-submenu__title {
    background-color: @bgColor  !important;
  }

  /deep/ .el-menu-item {
    background-color: @bgColor  !important;
  }

  /deep/ .el-submenu__title i {
    color: @fontColor;
  }

  /deep/ .el-icon-location {
    color: @fontColor;
  }

  .el-container {
    height: 100%;
    width: 100%;
  }

  .el-aside {
    position: fixed;
    left: 0;
    height: 100%;
    //background-color: rgba(12, 225, 245, 0.5);
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    height: 100%;
    width: 100%;
  }

  .el-footer {
    position: fixed;
    bottom: 0;
    height: 60px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  // flex 布局
  .utils-flex {
    display: flex;
  }

  .utils-flex-dir:extend(.utils-flex) {
    flex-direction: column;
  }

  .utils-flex-Justbetween:extend(.utils-flex) {
    justify-content: space-between;
  }

  .utils-flex-Justaround:extend(.utils-flex) {
    justify-content: space-around;
  }

  .utils-flex-Justcenter:extend(.utils-flex) {
    justify-content: center;
  }

  .utils-flex-Justend:extend(.utils-flex) {
    justify-content: flex-end;
  }

  .utils-flex-Juststart:extend(.utils-flex) {
    justify-content: flex-start;
  }

  .utils-flex-Aligncenter:extend(.utils-flex) {
    align-items: center;
  }

  .utils-flex-Alignspace:extend(.utils-flex) {
    align-items: space-between;
  }

  .utils-flex-flex1 {
    flex: 1;
  }

  .utils-flex-flex2 {
    flex: 2;
  }

  .utils-flex-flex3 {
    flex: 3;
  }

  .views {
    height: 100%;
    width: 100%;
  }

  .container {
    height: 100%;
    width: 100%;
  }
</style>
